<template>
    <div class="info-input" ref="infoSelect">
        <el-input
            class="info-inner-info"
            placeholder=""
            v-model="innerVal"
            size="mini"
            @input="changeContent">
        </el-input>
        <div class="inner-box" v-if="showInnerBox && resList.length">
            <div class="item" v-for="item in resList" @click="selectItem(item)">
                {{item.Key}}&emsp;{{item.Value}}
            </div>
        </div>
    </div>
</template>

<script>
    import ZDBM from '@/assets/json/ZDBM.json'
    import ZDYY from '@/assets/json/ZDYY.json'
    import BLZD from '@/assets/json/BLZD.json'
    import shoushu from '@/assets/json/shoushu.json'

    export default {
        name: 'index',
        props: ['code', 'checkJSON', 'inputVal'],
        model: {
            prop: 'inputVal',
            event: 'changeInputVal'
        },
        data () {
            return {
                resList: [],
                allList: [],
                innerVal: '',
                timer: null,
                showInnerBox: false
            }
        },
        created () {
            this.innerVal = this.inputVal
            switch (this.checkJSON) {
            case 'ZDBM':
                this.allList = ZDBM[0].keyValue
                break
            case 'ZDYY':
                this.allList = ZDYY[0].keyValue
                break
            case 'BLZD':
                this.allList = BLZD[0].keyValue
                break
            case 'shoushu':
                this.allList = shoushu[0].keyValue
                break
            }
        },
        mounted () {
            document.addEventListener('click', (e) => {
                if (this.$refs && this.$refs.infoSelect && !this.$refs.infoSelect.contains(e.target)) {
                    this.showInnerBox = false
                }
            })
        },
        methods: {
            /**
             * 修改内容
             * @param val 输入的内容
             */
            changeContent (val) {
                this.showInnerBox = true
                this.$emit('changeInputVal', val)
                let sum = 0
                let arr = []
                if (val !== '') {
                    for (let i = 0; i < this.allList.length; i++) {
                        if ((this.allList[i].Key.includes(val) || this.allList[i].Value.includes(val))) {
                            if (sum < 100) {
                                arr.push(this.allList[i])
                                sum++
                            } else {
                                break
                            }
                        }
                    }
                } else {
                    for (let i = 0; i < this.allList.length; i++) {
                        if (sum < 100) {
                            arr.push(this.allList[i])
                            sum++
                        } else {
                            break
                        }
                    }
                }
                this.resList = arr
            },
            /**
             * 选择选项
             * @param item 选项内容
             */
            selectItem (item) {
                this.$emit('changeInputVal', this.code ? item.Key : item.Value)
                this.innerVal = this.code ? item.Key : item.Value
                this.resList = []
                this.showInnerBox = false
            }
        },
        beforeDestroy () {
            document.removeEventListener('click', null, false)
        }
    }
</script>

<style scoped lang="scss">
    .info-input {
        position: relative;
        .info-inner-info {
            width: 100%;
        }
        .inner-box {
            position: absolute;
            width: 100%;
            min-width: 350px;
            left: 0;
            top: 24px;
            background: #fff;
            max-height: 260px;
            z-index: 20;
            overflow-y: auto;
            border: 1px solid #dfe4ed;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            .item {
                min-height: 20px;
                line-height: 20px;
                font-size: 13px;
                cursor: pointer;
                padding: 2px 10px;
                text-align: left;
                &:hover {
                    background: #f0f0f0;
                }
            }
        }
    }
</style>
